<template>
	<view class="InfoSetupData">
		<view class="setup radius12 f-background margin-bottom-16">
			<button class="setup-name dis-cen border-bottom" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<view class=" color-4 size-30">修改头像</view>
				<view class="dis-ali">
					<u--image :src="userInfo.headImg" width="72rpx" height="72rpx" shape="circle" radius="100rpx" v-if="userInfo.headImg">
						<image slot="error" class="info-img" src="@/static/icons/txs.png" mode="">
						</image>
					</u--image>
					<image v-else class="info-img" src="@/static/icons/txs.png" mode="">
					</image>
					<!-- <image class="info-img margin-right-12" v-if="userInfo.headImg" :src="userInfo.headImg" mode=""></image>
					<image class="info-img margin-right-12" v-else src="@/static/icons/txs.png" mode=""></image> -->
					<text class="iconfont icon-right-1-copy size-24"></text>
				</view>
			</button>
			<view class="setup-name dis-cen" @click="nameShow = true">
				<view class=" color-4 size-30">修改昵称</view>
				<view class="dis-end height100">
					<!-- <view class="height100"> -->
					<input v-model="userInfo.nickName" disabled
						class="setup-input height100 font-weight-500 color-4 size-28" type="text" placeholder="请输入昵称" />
					<!-- </view> -->
					<text class="iconfont icon-right-1-copy size-24 margin-left-12 tops"></text>
				</view>
			</view>
		</view>
		<view class="setup radius12 f-background margin-bottom-16">
			<view class="setup-name dis-cen border-bottom" @click="onJumpPage('policy')">
				<view class=" color-4 size-30">隐私政策</view>
				<text class="iconfont icon-right-1-copy size-24"></text>
			</view>
			<view class="setup-name dis-cen" @click="onJumpPage('userAgreement')">
				<view class=" color-4 size-30">用户协议</view>
				<text class="iconfont icon-right-1-copy size-24"></text>
			</view>
		</view>
		<view class="creation font-weight-400 color9 size-32">账号创建时间 {{userInfo.createTime}}</view>
		<!-- 		<u-button type="primary" :plain="true"
			:customStyle="{width: '718rpx',height: '108rpx',borderRadius: '12rpx'}" color="#ffffff"
			@click="onJumpPage('address')">
			<text class="color-4 font-weight-600 size-30">注销</text>
		</u-button> -->
		<!-- 修改昵称 -->
		<u-popup mode="center" round="26rpx" :show="nameShow" @close="nameShow=false,params.nickName=''" :safeAreaInsetBottom="false">
			<view class="nick-name">
				<view class="nick-title border-bottom dis por">
					<view class="title font-weight-400 color3 size-28">修改昵称</view>
					<text class="iconfont icon-guanbi color6 poa size-40" @click="nameShow=false"></text>
				</view>
				<view class="nick dis-ali border-bottom">
					<view class="name font-weight-400 color3 size-28">昵称</view>
					<input type="nickname" class="name-input font-weight-400 color3 size-28" v-model="params.nickName"
						placeholder="请输入昵称" />
				</view>
				<u-button type="primary"
					:customStyle="{width: '576rpx',height: '80rpx',borderRadius: '100rpx',margin: '60rpx auto 0'}"
					color="#FF1E1E" @click="onSaveName">
					<text class="color-f font-weight-600 size-30">保存</text>
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const url = {
		policy: '/packagePerson/privacy-policy/privacy-policy', // 隐私政策
		userAgreement: '/packagePerson/user-agreement/user-agreement', // 用户协议
	}
	import { UserInfo, BindInfo } from "@/api/index"
	import { singleUpload } from '@/utils/index';
	export default {
		data() {
			return {
				nameShow: false,
				userInfo: {},
				params: {
					headImgUrl: '', // 头像
					nickName: '', // 昵称
				},
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			async getUserInfo() {
				const { code, data } = await UserInfo()
				if (code == '200') {
					console.log('data', data)
					this.userInfo = data
				}
			},
			async onChooseAvatar(e) {
				console.log(e.detail.avatarUrl)
				const img = await singleUpload(e.detail.avatarUrl, 1)
				console.log('imgimg', img.imgURL)
				this.params.headImgUrl = img.imgURL
				this.onSave()
			},
			async onSave() {
				let _this = this
				const { code, data } = await BindInfo(this.params)
				if (code == "200") {
					_this.showToast('保存成功！')
					this.nameShow = false
					setTimeout(() => {
						_this.getUserInfo()
					}, 1500)
				}
			},
			async onSaveName() {
				let bool = ''
				if (!this.params.nickName) bool = '请填写昵称'
				else if (!/^.{2,20}$/.test(this.params.nickName)) bool = '请输入正确的昵称'
				if (bool) {
					this.showToast(bool)
					return
				}
				this.onSave()
			},
			onJumpPage(name) {
				uni.navigateTo({
					url: url[name]
				});
			},
			showToast(bool) {
				uni.showToast({
					title: bool,
					duration: 1400,
					icon: 'none'
				});
			},
		}
	}
</script>

<style lang="scss">
	.InfoSetupData {
		padding: 16rpx;

		.tops {
			position: relative;
			top: 1px;
		}

		.info-img {
			width: 72rpx;
			height: 72rpx;
			border-radius: 100%;
		}

		.setup {
			padding-left: 24rpx;

			.setup-name::after {
				border: 0;
			}
			.dis-end{
				width: 70%;
			}
			.setup-name {
				color: #D8D8D8;
				height: 116rpx;
				padding-right: 24rpx;
				background: #fff;
				padding-left: 0;
				.dis-end{
					align-items: center;
				}
				.setup-input {
					width: 70%;
					text-align: right;
				}
			}
		}

		.creation {
			text-align: center;
			margin-top: 28rpx;
		}

		// 修改昵称
		.nick-name {
			width: 678rpx;
			height: 382rpx;

			.nick-title {
				height: 84rpx;
				.icon-guanbi{
					right: 28rpx;
					top: 28rpx;
				}
			}

			.nick {
				margin: 0 46rpx;
				padding-top: 46rpx;

				.name {
					width: 76rpx;
				}

				.name-input {
					height: 76rpx;
				}
			}
		}
	}
</style>